<template>
  <el-select v-model="selectedUser"
             filterable
             clearable
             @change="onchange"
             style="width:100%;"
             :placeholder="$t('custom.clientbot.selectusers')">
    <el-option v-for="item in userListData"
               :key="item.id"
               :label="item.realName"
               :value="item.username">
    </el-option>
  </el-select>
</template>

<script>
import { BridgeComponent } from './bridgeComponent'

export default {
  data () {
    return {
      userFields: {
        value: 'username'
      },

      userListVisible: false,
      userListData: [],
      selectedUser: null
    }
  },
  created () {
    this.getUserLists()
    BridgeComponent.$on('updateScheduleUserList', (e) => {
      this.getUserLists(e)
    })
  },
  methods: {
    getUserLists (e) {
      const params = {
        status: 1,
        regSource: '1'
      }
      if (e && e.length && e.length > 0) {
        params.deptIds = e.join(',')
      }
      this.$interface.schedule.getWorkScheduledUserListApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            this.$message.error(res.msg)
          }
          this.userListData = res.data
        })
    },
    onchange (e) {
      // this.$emit('resetSearch', e.value)
      this.$emit('resetSearch', e)
    }
  }
}
</script>

<style scoped lang='scss'>
.dropdown-lists {
  width: 100%;
  max-height: 300px;
  overflow: scroll;

  &::-webkit-scrollbar {
    width: 6px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #aaaaaa;
    // background-image: -webkit-linear-gradient(
    //   45deg,
    //   rgba(255, 255, 255, 0.2) 25%,
    //   transparent 25%,
    //   transparent 50%,
    //   rgba(255, 255, 255, 0.2) 50%,
    //   rgba(255, 255, 255, 0.2) 75%,
    //   transparent 75%,
    //   transparent
    // );
  }

  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #ededed;
    border-radius: 10px;
  }
}
</style>
